<template>
  <div id="test">
      <div class="body" v-show="shows"></div>
      <ul class="nav">
        <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
        <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="item.id" class="bbb">
          <!-- 在这里打印出boll值方便查看 -->
          {{item.name}}{{item.show}}
          <!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
          <ul v-show="item.show" class="ccc">
            <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
            <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)" :key="a.id" class="ddd">{{a}}</li>
          </ul>
        </li>
      </ul>
        <div class="allgoods" v-show="shows"></div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      shows: true,
      headerData: [{
        name: '全部类目',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '附近商家',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '智能排序',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '筛选',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }],
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
      value6: '',
      select: true,
      navs1: false,
      navs2: false,
      navs3: false,
      navs4: false,
      down: true,
      changeNav: '',
      navs: [
        {id: 1, text: '全部类目'},
        {id: 2, text: '附近商家'},
        {id: 3, text: '智能排序'},
        {id: 4, text: '筛选'}
      ],
      nav: [
        {id: 1, text: '全部', num: '14340'}
      ],
      isChange1: false,
      isChange2: false,
      isChange3: false,
      isChange4: false,
      isUp1: false,
      isUp2: false,
      isUp3: false,
      isUp4: false
    }
  },
  methods: {
    nav1 () {
      if (this.select === true) {
        this.select = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.select = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav2 () {
      if (this.select === true) {
        this.select = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.select = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav3 () {
      if (this.select === true) {
        this.select = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.select = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav4 () {
      if (this.select === true) {
        this.select = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.select = true
        this.isChange4 = false
        this.isUp4 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs4 = true
        this.isChange4 = !this.isChange4
        this.isUp4 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
        this.isChange3 = false
        this.isUp3 = false
      }
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    },
    changeli: function (ind, item) {
      // 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
      this.headerData.forEach(i => {
        // 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
        if (i.show !== this.headerData[ind].show) {
          i.show = false
          this.shows = true
        }
      })
      // 取反(true或false)
      item.show = !item.show
      this.headerData.forEach(i => {
        if (i.show === true) {
          this.shows = false
        }
      })
      console.log(item.name)
    },
    doThis: function (index) {
      alert(index)
    }
  }
}
</script>

<style scoped lang="scss">
  li{
    list-style: none;
  }
  #cate{
    width: 6.4rem;
    margin: 0 auto;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    margin: 0 auto;
    padding: 0;
    width: 6.4rem;
    height: .8rem;
    background-color: #fff;
    .return{
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .2rem 0 .2rem 0.15rem ;
      }
    }
    .search{
      display: flex;
      justify-content: flex-start;
      width: 4.5rem;
      height: .5rem;
      margin:auto 0;
      border-radius: 1rem;
      font-size: .2rem;
      line-height: .5rem;
      color: #8e8e94;
      background-color: #ebeced;
      border:.005rem solid  azure;
      img{
        width: .25rem;
        height: .25rem;
        margin: .15rem .1rem .1rem  .6rem;
        font-size: .5rem;
        color: #fff;
      }
    }
    .mine{
      width: .5rem;
      font-size: 0.15rem;
      text-align:center;/*水平居中*/
      overflow: hidden;
      color: #fff;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .2rem  .5rem .2rem 0;
      }
    }
  }
  .body{
    .download{
      width: 6.4rem;
      margin: 0 auto;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      height: 2rem;
      background-image: url("../assets/downloadbg.png");
      background-repeat: no-repeat;
      background-size:100% 100%;
      position: relative;
      border-bottom: 1px solid #f0efed;
      .download1{
        width: 2rem;
        height: .7rem;
        position: absolute;
        left:1.1rem;
        bottom: .2rem;
      }
      .download2{
        width: 2rem;
        height: .7rem;
        position: absolute;
        right:1.1rem;
        bottom: .2rem;
      }
    }
    .classify{
      height: 3.4rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
      li{
        width: 1.5rem;
        height: 1.6rem;
        a{
          display: flex;
          flex-direction:column;
          align-items: center;
          justify-content: space-around;
          width: 1.5rem;
          height: 1.6rem;
          font-size: .1rem;
          color: #666;
          img{
            display: block;
            width: .9rem;
            height: .9rem;
          }
        }
      }
    }
  }
  .dropdown{
    width: 6.4rem;
    position: relative;
    .nav{
      width: 100%;
      height: .8rem;
      background-color: #fff;
      display: flex;
      color: #b7b7b7;
      li{
        display: flex;
        width: 25%;
        font-size: .25rem;
        justify-content: center;
        align-items: center;
        img{
          display: block;
          width: .25rem;
          height: .25rem;
          padding-left: .1rem;
        }
      }
    }
   .ccc{
      position: absolute;
      width: 6.4rem;
      .ddd{
        height: 1rem;
        font-size: .3rem;
        line-height: 1rem;
        border-top: 1px solid #ddd8cd;
        padding-left: .5rem;
        color: #333;
      }
    }
  }
  .change{
      color: #06c1ae;
    }
.allgoods{
  width: 100px;
  height: 100px;
  background-color: black;
}
</style>
